<template>

    <swiper
        :modules="modules"
        :slidesPerView="1"
        :spaceBetween="30"
        :autoplay="true"
        :loop="true"
        :navigation="true"
        :pagination="{ dynamicBullets: true }"

        @swiper="onSwiper"
        @slideChange="onSlideChange"
    >
<!--      effect="fade"-->
  <!--    :scrollbar="{ draggable: true }"滚动条-->
      <swiper-slide>1</swiper-slide>
      <swiper-slide>2</swiper-slide>
      <swiper-slide> <div @click="goPage('http://www.baidu.com')"><img src="../assets/1.jpg"></div></swiper-slide>
      <swiper-slide><img src="../assets/2.png"></swiper-slide>
      <swiper-slide><img src="../assets/1.jpg"></swiper-slide>
  <!--    <swiper-slide v-for="(slide, key) in swiperList" :key="key" >-->
  <!--      <div align="center"><img :src="slide" alt=""></div>-->
  <!--    </swiper-slide>-->

    </swiper>

  <div @click="goPage('http://www.chao99.top')">点我</div>

</template>
<script>
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, Autoplay, A11y, EffectFade  } from 'swiper';

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper styles
import "./style.css";
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import 'swiper/css/autoplay';

// Import Swiper styles
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  methods:{
    goPage (url) {
      alert(url)
      window.location.href = url
    },
    aaa(url){
      window.location.href=url
    }
  },
  setup() {
    const onSwiper = (swiper) => {
      console.log(swiper);
    };
    const onSlideChange = () => {
      console.log('slide change');
    };
    return {
      onSwiper,
      onSlideChange,
      modules: [Navigation, Pagination, Scrollbar, Autoplay, A11y,EffectFade],
    };
  },
};
</script>
<style scoped >

</style>
